<template>
	<view class="complaint">
		<view class="hearder">
			<view class="img-box" @click="Todetail">
				<u-image width="120rpx" height="140rpx" :src="OrderDe.image"></u-image>
			</view>
			<view class="txt-box">
				<view class="title">{{OrderDe.product || ''}}</view>
				<view class="titleone">服务时间:{{OrderDe.product_item || ''}}</view>
				<view class="titletwo">服务规格:{{OrderDe.product_detail || ''}}</view>
				<view class="price">￥{{OrderDe.order_amount_total || ''}}/台
				</view>
			</view>
		</view>
		<view class="eval">
			<view v-for="(item,i) in commentObj.tags" :key="i">
				<text class="score">{{ item.name }}</text>
				<u-rate :count="count" v-model="item.grade" active-color="#F7BD2B" inactive-color="#e5e5e5">
				</u-rate>
			</view>
		</view>
		<view class="main">
			<u-input v-model="commentObj.content" type="textarea" height="200" :clearable="false" :border="false"
				placeholder="写下您对本服务的评价,可以帮助本平台的进步" maxlength="100" focus="true" />
			<view class="main-form">
				<u-upload max-count="6" :action="url" :header="header" @on-success="uploadsuccess"></u-upload>
				<view class="survalue">{{commentObj.content.length}}/100</view>
			</view>
		</view>
		<view class="footer">
			<button class="btn" @click="getComment">确认提交</button>
		</view>
	</view>
</template>

<script>
	import { ResOrderDe, ResComment, ResTags, ResUpload } from '@/untils/api.js'
	export default {
		data() {

			return {
				count: 5,
				OrderDe: {},
				url: 'https://cleaning.51meteor.com/api/common/upload',
				header: {
					token: uni.getStorageSync('token')
				},
				commentObj: {
					id: '',
					content: '',
					images: [],
					tags: [
						{ name: 1, grade: 2 },
						{ name: 2, grade: 2 },
						{ name: 3, grade: 2 },
					]
				},
				tagname: [], // 标签名称
			}
		},
		onLoad(option) {
			this.getOrderDe(option.id)
			this.getTags()
		},

		methods: {
			Todetail() {
				uni.navigateTo({
					url: `/pages/Home/Detail?id=${this.OrderDe.product_id}`
				})
				uni.setNavigationBarTitle({
					title: this.OrderDe.product
				})
			},
			// 图片上传之后的回调
			uploadsuccess(e) {
				console.log(e);
				this.commentObj.images.push(e.data.fullurl)
			},
			//  发布评价
			async getComment() {
				const { data: resb } = await ResComment(this.commentObj)
				if (resb.code != 1) return uni.$showMsg(resb.msg)
				// 清空输入内容
				this.commentObj.content = ''
				this.commentObj.images = []
				// 页面跳转
				uni.navigateTo({
					url: `/pages/Evaluate/Revaluate?id=${this.OrderDe.product_id}`
				})
			},
			// 获取订单信息
			async getOrderDe(id) {
				let idObj = { id: id }
				const { data: res } = await ResOrderDe(idObj)
				if (res.code != 1) return uni.$showMsg(res.msg)
				this.OrderDe = res.data
				this.commentObj.id = res.data.product_id
			},
			async getTags() {
				let _that = this
				const { data: res } = await ResTags()
				this.tagname = res.data

				let laber_list = res.data
				let tag_array = []

				laber_list.forEach((item) => {
					let tag_ass = {
						name: item,
						grade: 5
					}
					tag_array.push(tag_ass)
				})
				_that.commentObj.tags = tag_array
			}
		}

	}
</script>

<style lang="scss" scoped>
	.complaint {
		padding: 0 25rpx;
		background-color: #F7F7F7;
		overflow: hidden;

		.hearder {
			display: flex;
			margin: 40rpx 0;

			.txt-box {
				margin-left: 15rpx;
				font-size: 30rpx;

				.title {
					font-weight: 700;
				}


				.titleone,
				.titletwo {
					color: #919191;
					font-size: 24rpx;
				}

				.price {
					color: #CB6C72;
				}
			}
		}

		.eval,
		.main {
			background-color: #fff;
			padding: 37rpx 42rpx 32rpx 32rpx;
			border-radius: 30rpx;
		}

		.eval {
			height: 262rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.score {
				margin-right: 47rpx;
			}
		}


		.main {
			margin: 39rpx 0 70rpx;
			padding-bottom: 45rpx;

			.main-form {
				position: relative;

				/deep/.u-list-item {
					margin: 5rpx;
				}

				.survalue {
					position: absolute;
					right: -10rpx;
					bottom: -30rpx;

				}
			}

		}

		.footer {
			.btn {
				width: 593rpx;
				height: 84rpx;
				font-size: 28rpx;
				line-height: 84rpx;
				border-radius: 40rpx;
				background-color: #01C3A8;
				color: #fff;
			}

		}
	}
</style>
